<template>
	<view class="content">
		<view class="boxbg" :class="count<=3?'boxbgnew':''">
			<view class="guang">
				<image :style="{height:count<=3?'800rpx':'1200rpx'}" src="/static/index/guang1.png"></image>
			</view>
			<view class="list" :class="setptwo?'list list2':'list'" v-for="(ited,indexed) in newData" :key="indexed" :style="{left:(state?ited.width:0) +'rpx',top: ited.top,transition: ited.left}">
				<view class="item" v-for="(item,index) in ited.datas" :key="index">
					<view class="box relative" :style="{backgroundImage: item.level==1?'url(https://home.miaokaikeji.com/web/applet/newimg/lv1.png)':item.level==2?'url(https://home.miaokaikeji.com/web/applet/newimg/lv2.png)':item.level==3?'url(https://home.miaokaikeji.com/web/applet/newimg/lv3.png)':item.level==4?'url(https://home.miaokaikeji.com/web/applet/newimg/lv4.png)':''}">
						<image class="level" :src="item.level==1?'/static/index/z1.png':item.level==2?'/static/index/z2.png':item.level==3?'/static/index/xiyou.png':item.level==4?'/static/index/zg.png':''" ></image>
						<image class="shopimg" :src="item.imgUrlList[0]"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import { priceInteger } from "@/utils";
	export default {
		data() {
			return {
				state: false,
				setptwo:false,
				datas:[],
				ajaxData:[],
				timer:null,
				boxId:'', //当前盲盒ID
				type: '', //抽奖选项
				newData:[],
				count:0,
			};
		},
		onLoad(options) {
			_this=this;
			if(options.id){
				_this.count=options.count;
				if(options.count==3){
					_this.newData=[
						{top:'230rpx',width:0,left:'left 4.6s',datas:[]},
						{top:'410rpx',width:0,left:'left 4.7s',datas:[]},
						{top:'590rpx',width:0,left:'left 4.8s',datas:[]}
					]
				}else if(options.count==5){
					_this.newData=[
					{top:'230rpx',width:0,left:'left 4.6s',datas:[]},
					{top:'410rpx',width:0,left:'left 4.7s',datas:[]},
					{top:'590rpx',width:0,left:'left 4.8s',datas:[]},
					{top:'770rpx',width:0,left:'left 4.9s',datas:[]},
					{top:'950rpx',width:0,left:'left 5s',datas:[]}
				]
				}
				_this.boxId=options.id;
				if(options.type){
					_this.type=options.type;
				}
				_this.ajax();
			}
		},
		onShow() {},
		methods:{
			returnBack(){
				_this.$routerTo.navigateBack();
			},
			// 查看盲盒所有商品
			ajax(){
				_this.$HTTP({
					method: 'GET',
					url: 'shopServer/box/getBoxDetail/'+_this.boxId,
					data: {
						time: Date.parse(new Date())
					}
					// header:'form'
				}).then(res => {
					res.goodsList.forEach((item, index) => {
						item.price = priceInteger(item.price);
						item.recyclePrice = priceInteger(item.recyclePrice);
					})
					res.goodsList=res.goodsList.sort(() => Math.random() -0.5); //混淆商品顺序
					_this.ajaxData.push(...res.goodsList)
					// // 获取数据添加商品到ajaxData之后再调用
					_this.getdata() //添加商品
				}).catch(err => {
					console.log(err);
				});
			},
			// 首尾添加扰乱商品
			getdata(){
				_this.newData.forEach((item, index) => {
					let len=_this.ajaxData.length-1
					for(let i=0;i<40;i++){
						item.datas.push(_this.ajaxData[Math.round(Math.random()*len)]) //添加扰乱商品
					}
					item.datas.push(..._this.ajaxData) //添加真实中奖商品
					for(let i=0;i<40;i++){
						item.datas.push(_this.ajaxData[Math.round(Math.random()*len)]) //添加扰乱商品
					}
				})
				// 添加完扰乱商品在执行抽奖
				setTimeout(function(){
					_this.start();
				},800)
			},
			// 开始抽奖
			start() {
				_this.$HTTP({
					method: 'POST',
					url: 'shopServer/box/openBox',
					data: {
						boxId: _this.boxId,
						openTypeId: _this.type, //开盒类型ID
						time: Date.parse(new Date())
					},
					header:'form'
				}).then(res => {
					res.forEach((item, index) => {
						item.newprice = priceInteger(item.price);
						item.newrecyclePrice = priceInteger(item.recyclePrice);
					})
					
					// 打乱返回数据顺序，为了展示大奖不会始终在第一个
					let disturbance=res.slice(0);
					disturbance=disturbance.sort(() => Math.random() -0.5);
					
					//(用index定位抽中的商品)
					let ran1=_this.ajaxData.findIndex((item,index)=>item.id==disturbance[0].id);
					let ran2=_this.ajaxData.findIndex((item,index)=>item.id==disturbance[1].id);
					let ran3=_this.ajaxData.findIndex((item,index)=>item.id==disturbance[2].id);
					let ran4='';
					let ran5='';
					if(_this.newData.length==5){
						ran4=_this.ajaxData.findIndex((item,index)=>item.id==disturbance[3].id);
						ran5=_this.ajaxData.findIndex((item,index)=>item.id==disturbance[4].id);
					}
					
					let setp1=(ran1+40-2)*-150
					let setp2=(ran2+40-2)*-150 
					let setp3=(ran3+40-2)*-150
					let setp4=0;
					let setp5=0;
					if(_this.newData.length==5){
						setp4=(ran4+40-2)*-150
						setp5=(ran5+40-2)*-150
					}
					
					_this.newData[0].width=setp1;
					_this.newData[1].width=setp2;
					_this.newData[2].width=setp3;
					if(_this.newData.length==5){
						_this.newData[3].width=setp4;
						_this.newData[4].width=setp5;	
					}
					
					_this.state = true
					_this.timer=setTimeout(()=>{
						_this.setptwo=true
						clearTimeout(_this.timer)
						_this.$routerTo.redirectTo({
							path: '/pages/index/LotteryResults?data='+JSON.stringify(res)+'&boxId='+_this.boxId
						});
					},5500)
				}).catch(err => {
					console.log(err);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.boxbgnew{
	height: 952rpx !important;
	background-image: url('https://home.miaokaikeji.com/web/applet/newimg/drawbox.png') !important;
}
.content{
	width: 100%;
	height: 1624rpx;
	background-image: url('https://home.miaokaikeji.com/web/applet/newimg/drawbg.png');
	background-size: 100% 100%;
	overflow: hidden;
	.boxbg{
		width: 100%;
		height: 1245rpx;
		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/drawboxc.png');
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 200rpx;
	}
	.guang{
		width: 100%;
		position: absolute;
		display: flex;
		justify-content: center;
		left: 0;
		top: 110rpx;
		image{
			width: 22vw;
			height: 1200rpx;
		}
	}
	.list {
		position: absolute;
		left: 0;
		top: 280rpx;
		display: flex;
		box-sizing: border-box;
		transition: left 5s;
		.item {
			width: 20vw;
			height: 150rpx;
			box-sizing: border-box;
			padding: 0 10rpx;
			.box{
				width: 100%;
				height: 100%;
				background-size: 100% 100%;
				box-sizing: border-box;
				padding: 10rpx;
				display: flex;
				align-items: center;
				.level{
					width: 70rpx;
					height: 82rpx;
					position: absolute;
					right: -15rpx;
					top: -20rpx;
				}
				.shopimg{
					width: 100%;
					height: 70rpx;
				}
			}
		}
	}
	.list2{
		transition: left 0.8s;
	}
}
</style>
